<template>
  <!-- <div id="app" @mousedown="mousedownMoveApp"> -->
  <div id="app">
    <box
      v-if="returnMsg"
      :root="returnMsg"
      :nodeArr="returnMsg.children"
      :belongTo="returnMsg.name"
    ></box>
  </div>
</template>

<script>
import Box from "@/views/Box";

export default {
  name: "App",
  components: {
    Box,
  },
  data() {
    return {
      ace: {
        name: "food",
        children: [
          {
            name: "fruit",
            children: [
              {
                name: "apple",
                children: null,
              },
              {
                name: "cherry",
                children: null,
              },
              {
                name: "grape",
                children: null,
              },
            ],
          },
          {
            name: "vegetable",
            children: [
              {
                name: "青椒",
                children: null,
              },
              {
                name: "娃娃菜",
                children: [
                  {
                    name: "大娃娃菜",
                    children: null,
                  },
                  {
                    name: "小娃娃菜",
                    children: null,
                  },
                ],
              },
            ],
          },
          {
            name: "肉",
            children: [
              {
                name: "牛肉",
                children: null,
              },
              {
                name: "猪肉",
                children: null,
              },
            ],
          },
        ],
      },
      returnMsg: null,
    };
  },
  methods: {
    ajax() {
      var request = new XMLHttpRequest();
      request.onreadystatechange = () => {
        if (request.readyState === 4) {
          if (request.status >= 200 && request.status < 300) {
            // console.log(request.response).data;
            // console.log(res.target.response);
            this.returnMsg = JSON.parse(request.response).data;
          } else if (request.status >= 400) {
            console.log("请求失败");
          }
        }
      };
      request.open(
        "GET",
        "http://106.52.79.181:9882/myehr/ComDep/comDepTree.action?swaggerUserCode=sysadmin"
      );
      request.send();
      return request.response;
    },
    mousedownMoveApp(e){
      console.log(e);
      console.log(e.offsetX, e.offsetY);
      console.log('🐴',app.scrollLeft);
      let preX=e.offsetX
      let preY=e.offsetY
      app.onmousemove=function(e){
        let nexX=e.offsetX
        let nexY=e.offsetY
        // app.style.left=nexX-preX +'px'
        // app.style.right=nexY-preY + 'px'
        app.scrollX=2000 
        console.log(e.offsetX, e.offsetY)
        console.log( app.scrollLeft)
        console.log(app);
        app.scrollLeft = preX+nexX;
        console.log('🐉',app.scrollLeft);
      }
      app.onmouseup=function(){
        app.onmousemove=null
      }
    }

  },
  created() {
    this.ajax();
  },
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
/* body {
  margin: 0;
} */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 100%;
  min-height: 100vh;
  width: auto;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>
